<template>
    <div>
        <top-bar></top-bar>
        <div
            class="waterfall-content"
            :class="{ 'footer-download': this.footer.isDownload, 'footer-default': this.footer.isDefault, 'footer-detail': this.footer.isDetail  }">
            <card v-for="(item, index) in items" :key="item.id" class="waterfall-item" :id="item.id" :title="item.title" :date="item.date" type="waterfall" :bg="item.image"></card>
            <div style="clear: both;"></div>
        </div>
        <mfooter pageType="photoIndex" title="完善个人资料，下载原版无水印照片" :type="this.footer.type"></mfooter>
    </div>
</template>

<script>
    import TopBar from '@/components/TopBar'
    import Card from '@/components/Card'
    import Mfooter from '@/components/Mfooter'
    import {Util} from '@/js/Util'
    import {AlertModule} from 'vux'
    import {Config} from '@/js/Config'
    export default {
        components: {
            TopBar,
            Card,
            Mfooter,
            AlertModule
        },
        mounted() {
            // 微信登录
            this.loginWechat(Util.getUrlParam('code'));
            Util.setFooterClass(this);
        },
        created () {
            this.getList();
        },
        data() {
            return {
                waterfall: {
                    screenWidth: window.screen.width * 0.48,
                    itemWidth: window.screen.width * 0.48 * 0.9
                },
                footer: {
                    type: 'default',
                    isDefault: false,
                    isDetail: false,
                    isDownload: false
                },
                items: []
            }
        },
        methods: {
            // 授权登录
            loginWechat(code) {
                let _self = this;
                // 判断是否有账号信息
                if (!sessionStorage.getItem('MeiJingKu_openid')) {
                    if (!code) {
                        location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + Config._appid + '&r' +
                                'edirect_uri=' + encodeURIComponent(location.protocol + '//' + location.hostname + '/web/#/MeiJingSuiPai?id=' + this.$route.query.id) + '&response_type=code&scope' +
                                '=snsapi_userinfo&state=1#wechat_redirect';
                    }
                }else {
                    return false;
                }
                this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                // 测试接口
                // this.$http.post('user/LoginByOpenid/v1?openid=1').then(response => {
                this.$http.post('user/LoginByCode/v1?code=' + code).then(response => {
                        this
                            .$vux
                            .loading
                            .hide();
                        let result = response.data;
                        if (!result.code) {
                            sessionStorage.setItem('MeiJingKu_openid', result.data.openid);
                        } else {
                            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                                            Config._appid + '&redirect_uri=' + encodeURIComponent(location.protocol + '//' + location.hostname + '/web/#/MeiJingSuiPai?id=' + _self.$route.query.id) + '&respon' +
                                            'se_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
                        }
                    }, response => {
                        Util.errorWarning(this);
                    });
            },
            // 获取列表
            getList() {
                this.$vux.loading.show({text: 'Loading'});
                let openid = sessionStorage.getItem('MeiJingKu_openid'),
                    id = this.$route.query.id,
                    _self = this;
                /* if (!phone) {
                    this.$router.push({
                        name: 'MeiJing_index'
                    });
                    return false;
                } */
                this.$http.get('team/TeamPicture/v1?teamId=' + this.$route.query.id + '&openid=' + openid).then(response => {
                    let result = response.data;
                    // 验证失败
                    if(result.code) {
                        this.$vux.toast.text(result.data, 'bottom');
                        return false;
                    }
                    sessionStorage.setItem('MeiJingKu_auth', result.data.auth);
                    // 此处遍历生成图片
                    for(let i in result.data.pictures) {
                        let item = {
                            id: result.data.pictures[i].id,
                            title: result.data.pictures[i].name,
                            image: result.data.pictures[i].link,
                            date: result.data.pictures[i].time,
                            height: '',
                            width: '',
                            thumbHeight: ''
                        };
                        this.items.push(item);
                    }

                    for (let i = 0; i < _self.items.length; i++) {
                        let image = new Image();
                        image.src = _self
                            .items[i]
                            .image;
                        image.onload = function () {
                            _self
                                .items[i]
                                .height = this.height;
                            _self
                                .items[i]
                                .width = this.width;
                            _self
                                .items[i]
                                .thumbHeight = _self
                                .items[i]
                                .height / (_self.items[i].width / _self.waterfall.itemWidth);
                        }
                    }
                    this.$vux.loading.hide();
                }, response => {
                    Util.errorWarning(this);
                });
            }
        }
    }
</script>

<style lang="less">
    .waterfall-content {
        margin-top: 5rem;
    }

    .waterfall-zone {
        padding-bottom: 2rem;
    }

    .footer-default,
    .footer-detail {
        margin-bottom: 12rem !important;
    }

    .footer-download {
        margin-bottom: 15rem !important;
    }
</style>